/** https://reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update*/
/*
If you update a State Hook to the same value as the current state, React will bail out without rendering the children or firing effects. (React uses the Object.is comparison algorithm.)
如果你将一个状态钩子更新为与当前状态相同的值，React将退出，而不需要渲染子对象或触发效果

Note that React may still need to render that specific component again before bailing out. That shouldn’t be a concern because React won’t unnecessarily go “deeper” into the tree. If you’re doing expensive calculations while rendering, you can optimize them with useMemo.
注意，React可能仍然需要在退出之前再次渲染特定的组件。这不必担心，因为React不会不必要地深入到树的深处。如果在渲染时需要进行昂贵的计算，可以使用usemo对它们进行优化。

注意那个 Note that React may 的 may, 这个may的情况多半就是指下面这种
*/
import React, { useState } from 'react';

export default function App(){
  const [counter,setCounter] = useState({name:'计数器',number:0});
  console.log('render Counter')
  // 你会发现直接点击第二个button撒也不会触发
  // 但如果你先点击第一个 再点击第二个 那第二个button也可以触发一次 (16.12.0)
  return (
    <>
      <p>{counter.name}:{counter.number}</p>
      <button onClick={()=>setCounter({...counter,number:counter.number+1})}>+</button>
      <button onClick={()=>setCounter(counter)}>++</button>
    </>
  )
}

